<template>
  <!-- 顾客账户管理 -->
  <div class="customer">
    <!-- 头部 -->
    <div class="header">
      <el-date-picker v-model="Time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" :picker-options="pickerOptions" value-format="timestamp">
      </el-date-picker>
      <!-- 收益下拉选择 -->
      <el-select v-model="customerTpye" placeholder="请选择类型">
        <el-option label="充值" value="充值"></el-option>
        <el-option label="消费" value="消费"></el-option>
      </el-select>

      <el-select v-model="custmerStatus" placeholder="请选择状态">
        <el-option label="正常" value="正常"></el-option>
        <el-option label="未审核" value="未审核"></el-option>
      </el-select>

      <el-select v-model.number="custerId" placeholder="顾客编号">
        <el-option v-for="employee in allEmployeeData" :key="employee.id" :label="employee.userId"
          :value="employee.userId"></el-option>

      </el-select>

      <el-button type="primary" plain @click="toSearch">查询</el-button>

    </div>

    <!-- 内容 -->
    <div class="centor">

      <el-table size="mini" :data="custerData" style="width: 100%">
        <el-table-column align="center" prop="id" label="编号" width="80px" />
        <el-table-column align="center" prop="transferMoney" label="交易金额" />
        <el-table-column align="center" prop="transferTime" label="交易时间">
          <template slot-scope="scope">
            <span>{{ moment(scope.row.transferTime).format('YYYY-MM-DD HH:mm:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="交易类型" />
        <!-- <el-table-column align="center" prop="userId" label="用户编号" /> -->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.status=='正常'?'success':'danger'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="description" label="描述" />
      </el-table>
    </div>

    <!-- 底部 -->
    <div class="floot">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    get,
    post
  } from "@/utils/request";
  const moment = require('moment')

  export default {

    data() {
      return {
        //时间
        pickerOptions: {
          shortcuts: [{
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        Time: [],

        customerTpye: '',

        custmerStatus: '',

        custerId: '',

        custerData: [],


        currentPage: 1,

        pageSize: 8,


        total: 0,

        queryData: {},

        allEmployeeData: []



      };
    },
    computed: {},
    methods: {


      async getAllEmployee() {
        let params = {
          page: 1,
          pageSize: 10000,
        }

        let res = await get("/account/pageQueryCustomerAccount", params);

        this.allEmployeeData = res.data.list;

      },
      /**
       * @description: 控制每页数据条数
       * @param {*} val 每页要展示的数据条数
       * @return {*}
       * @author: ZachGmy
       */
      handleSizeChange(val) {
        // 将每页要展示的数据的条数 进行一个更新
        this.pageSize = val
        // 将当前的页数 重置到第一页
        this.currentPage = 1
        // 重新调用获取所有产品数据的方法
        this.query()
      },
      /**
       * @description: 控制当前显示的页数
       * @param {*} val 当前的页码
       * @return {*}
       * @author: ZachGmy
       */
      handleCurrentChange(val) {
        // 将当前页数 与 分页插件动态点击控制的页数相绑定
        this.currentPage = val
        // 重新调用获取所有产品数据的方法
        this.query()
      },
      moment,
      async query() {
        let data = {
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        let res = await get("/account/pageQueryCustomerAccount", {
          ...data,
          ...this.queryData
        });
        this.custerData = res.data.list
        this.total = res.data.total
      },
      toSearch() {
        let data = {
          //  类型
          type: this.customerTpye,

          status: this.custmerStatus,

          userId: this.custerId,

          beginTime: this.Time[0],

          endTime: this.Time[1],
        };
        // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
        for (const key in data) {
          if (!data[key]) {
            delete data[key];
          }
        }
        // 将参数 赋值给 queryData
        this.queryData = data;
        // 将页数强制回到第一页
        this.currentPage = 1;
        // 重新加载产品数据
        this.query();
      }
    },

    created() {
      this.query()
      this.getAllEmployee()
    },
    mounted() {},
  };

</script>
<style scoped>
  .floot {
    margin-top: 20px;
    float: right;
  }

  .centor {
    margin-top: 10px;
  }

</style>
